<template>
  <div class="mod-demo-echarts">
    <div class="topNav">
      <span class="dateTime">{{date}}</span>
      <span>常茂生物智能门禁系统</span>
      <span class="partName">常州常茂生物石化仓储有限公司</span>
    </div>
    <div class="rowBox">
      <div class="botItem" @click="showDetail(pageData.list1,'生活区')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.num1}}</span>
        </div>
        <div class="botTxt">生活区人数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.list2,'生产区')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.num2}}</span>
        </div>
        <div class="botTxt">生产区人数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.list3,'夹江码头')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.num3}}</span>
        </div>
        <div class="botTxt">夹江码头人数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.list4,'长江码头')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.num4}}</span>
        </div>
        <div class="botTxt">长江码头人数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.list4,'在场车辆')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.part13}}</span>
        </div>
        <div class="botTxt">在场车辆数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.lhlist,'球罐分拆项目')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.part7}}</span>
        </div>
        <div class="botTxt">球罐分拆项目</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.azlist,'安装单位')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.part8}}</span>
        </div>
        <div class="botTxt">安装单位人数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.tjlist,'C4改造项目')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.part9}}</span>
        </div>
        <div class="botTxt">C4改造项目</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.gslist,'公司员工')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.part10}}</span>
        </div>
        <div class="botTxt">公司员工人数</div>
      </div>
      <div class="botItem" @click="showDetail(pageData.wllist,'外来人员')">
        <img class="tlImg" src="@/assets/img/jx.png" alt />
        <img class="trImg" src="@/assets/img/jx.png" alt />
        <img class="blImg" src="@/assets/img/jx.png" alt />
        <img class="brImg" src="@/assets/img/jx.png" alt />
        <div class="topBox">
          <span class="botNum">{{pageData.part11}}</span>
        </div>
        <div class="botTxt">外来人员人数</div>
      </div>
    </div>

    <div class="boxBtomm">
      <div
        style="font-weight:bold; color:rgba(255,255,255,1);font-size:16px;padding-left: 500px;"
      >部门出勤情况</div>
      <el-row :gutter="20">
        <el-col :span="9">
          <div id="J_chartPieBox" class="chart-boxs"></div>
        </el-col>
        <el-col :span="15">
          <div style="display: flex;">
            <div class="bottomBox">
              <div class="rowsaBoxs" @click="showDetail(pageData.gclist,'工程技术部')">
                <span
                  class="rowsaBot"
                  style="font-size: 14px;margin-bottom: 10px;color: #EFC31A;"
                >工程技术部</span>
                <span class="rowsaTop">{{pageData.part1}}</span>
              </div>
              <div class="rowsaBoxs" @click="showDetail(pageData.gllist,'管理部门')">
                <span
                  class="rowsaBot"
                  style="font-size: 14px;margin-bottom: 10px;color: #4EBA6F;"
                >管理部门</span>
                <span class="rowsaTop">{{pageData.part2}}</span>
              </div>
              <div class="rowsaBoxs" @click="showDetail(pageData.aqlist,'安全环保部')">
                <span
                  class="rowsaBot"
                  style="font-size: 14px;margin-bottom: 10px;color: #3A97D2;"
                >安全环保部</span>
                <span class="rowsaTop">{{pageData.part3}}</span>
              </div>
              <div class="rowsaBoxs" @click="showDetail(pageData.mtlist,'码头操作部')">
                <span
                  class="rowsaBot"
                  style="font-size: 14px;margin-bottom: 10px;color: #945AA4;"
                >码头操作部</span>
                <span class="rowsaTop">{{pageData.part4}}</span>
              </div>
              <div class="rowsaBoxs" @click="showDetail(pageData.zklist,'总控操作部')">
                <span
                  class="rowsaBot"
                  style="font-size: 14px;margin-bottom: 10px;color: #E54C3C;"
                >总控操作部</span>
                <span class="rowsaTop">{{pageData.part5}}</span>
              </div>

              <div class="rowsaBoxs" @click="showDetail(pageData.kflist,'客服部')">
                <span
                  class="rowsaBot"
                  style="font-size: 14px;margin-bottom: 10px;color: #0091F1;"
                >客服部</span>
                <span class="rowsaTop">{{pageData.part6}}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog :title="dataTit" :visible.sync="dialogVisible" center>
      <el-table stripe :data="dataList" border style="width: 100%" height="500px" size="mini">
        <el-table-column
          prop="name"
          sortable
          header-align="center"
          align="center"
          width="80px"
          label="姓名"
        ></el-table-column>
        <el-table-column prop="departName" sortable header-align="center" align="center" label="部门"></el-table-column>
        <el-table-column
          prop="roleName"
          sortable
          header-align="center"
          align="center"
          width="80px"
          label="角色"
        ></el-table-column>
        <el-table-column
          v-if="iscart"
          prop="licenseNum"
          sortable
          header-align="center"
          align="center"
          label="车牌"
        ></el-table-column>
        <el-table-column
          prop="enterTime"
          sortable
          header-align="center"
          align="center"
          label="进入时间"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      pageData: {},
      dataList: [],
      dataTit: "",
      dialogVisible: false,
      chartLine: null,
      iscart: false,
      chartBar: null,
      chartPie: null,
      date: new Date(),
      chartScatter: null,
      timer: ""
    };
  },
  created() {
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function() {
      _this.date = //修改数据date
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ": " +
        new Date().getSeconds();
    }, 1000);
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  mounted() {
    // this.initChartPie();
    this.getPageData();
  },
  activated() {
    if (this.chartPie) {
      this.chartPie.resize();
    }
  },
  methods: {
    showDetail(list, title) {
      this.dataList = list;
      this.dataTit = title;

      this.dialogVisible = true;
      if (title.indexOf("车") > -1) {
        this.iscart = true;
      } else {
        this.iscart = false;
      }
    },
    getPageData() {
      this.$http({
        url: this.$http.adornUrl("/employee/countAllPerson1"),
        method: "post"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.initChartPie(data.info);
          this.pageData = Object.assign({}, this.pageData, data.info);
        } else {
        }
      });
    },

    initChartPie(data) {
      var option = {
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: data.totleNum,
            textAlign: "center",
            fontSize: 40,
            fill: "#FFF",
            width: 30,
            height: 30
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["35%", "50%"],
            label: {
              //饼图图形上的文本标签
              normal: {
                show: true,
                textStyle: {
                  color: "#01D4F9",
                  fontWeight: 600,
                  fontSize: 16 //文字的字体大小
                },
                formatter: "{d}%"
              }
            },
            data: [
              {
                value: data.part1,
                name: "工程技术部",
                itemStyle: {
                  color: "#EFC31A"
                }
              },
              {
                value: data.part2,
                name: "管理部门",
                itemStyle: {
                  color: "#4EBA6F"
                }
              },
              {
                value: data.part3,
                name: "安全环保部",
                itemStyle: {
                  color: "#3A97D2"
                }
              },
              {
                value: data.part4,
                name: "总控操作部",
                itemStyle: {
                  color: "#E54C3C"
                }
              },
              {
                value: data.part5,
                name: "码头操作部",
                itemStyle: {
                  color: "#945AA4"
                }
              },
              {
                value: data.part6,
                name: "客服部",
                itemStyle: {
                  color: "#0091F1"
                }
              }
            ]
          }
        ]
      };
      this.chartPie = echarts.init(document.getElementById("J_chartPieBox"));
      this.chartPie.setOption(option);
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    }
  }
};
</script>

<style lang="scss">
.mod-demo-echarts {
  background-color: #014ead;
  background-image: url(~@/assets/img/bj.png);
  background-size: cover;
  width: 100%;
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-boxs {
    min-height: 360px;
  }
  .topNav {
    background-image: url(~@/assets/img/top.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;

    flex: 2;
    font-size: 28px;
    letter-spacing: 8px;
    color: #ffffff;
    font-weight: bold;
    padding: 20px 0;
    position: relative;
    .dateTime {
      position: absolute;
      font-size: 14px;
      letter-spacing: 2px;
      left: 6%;
      bottom: 8%;
    }
    .partName {
      position: absolute;
      font-size: 14px;
      letter-spacing: 2px;
      right: 6%;
      bottom: 8%;
    }
  }
  .rowBox {
    padding: 15px;
    width: 100%;

    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    white-space: nowrap;
    margin: 10px 0;
    justify-content: space-between;
  }

  .botItem {
    flex-basis: 170px;
    flex-shrink: 0;

    white-space: nowrap;
    width: 170px;
    border: 1px solid #0099ff;
    position: relative;
    cursor: pointer;
    margin: 0 15px;

    .topBox {
      display: flex;
      background-image: url(~@/assets/img/yuan.png);
      width: 130px;
      height: 130px;
      justify-content: center;
      align-items: center;
      background-repeat: no-repeat;
      background-position: center;
      margin: 10px auto;
      background-size: 100% 100%;
    }
    .botTxt {
      text-align: center;
      border-top: 1px solid #0099ff;
      height: 38px;
      line-height: 38px;
      color: #fff;
      font-size: 18px;
    }
    .botNum {
      font-size: 60px;
      font-family: UniDreamLED;
      font-weight: 400;
      color: rgba(255, 230, 23, 1);
      letter-spacing: 2px;
    }

    .tlImg,
    .trImg,
    .blImg,
    .brImg {
      position: absolute;
      width: 8px;
      height: 8px;
    }
    .tlImg {
      left: -4px;
      top: -4px;
    }
    .trImg {
      right: -4px;
      top: -4px;
    }
    .blImg {
      left: -4px;
      bottom: -4px;
    }
    .brImg {
      right: -4px;
      bottom: -4px;
    }
  }
  .bottomBox {
    background-image: url(~@/assets/img/kuang.png);
    width: 780px;
    display: flex;

    flex-wrap: wrap;
    height: 300px;
    margin-top: 40px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 20px 0;
    justify-content: center;
  }
  .rowsaBoxs {
    width: 230px;
    text-align: center;
    display: flex;
    line-height: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .rowsaTop {
    font-size: 60px;
    font-family: UniDreamLED;
    font-weight: 400;
    color: rgba(1, 212, 249, 1);
    letter-spacing: 2px;
  }
  .boxBtomm {
    border: 2px solid rgba(4, 86, 147, 1);
    padding: 20px;
    position: relative;
    margin: 20px;
    box-sizing: border-box;
  }
}
</style>
